<template>
	
	<view class="section">
	  <text class="section-title">姓名</text>
	  <view class="remark-input">
	    <textarea placeholder="请输入姓名" v-model="name" auto-height/>
	  </view>
	</view>
	
	<view class="section">
	  <text class="section-title">联系电话</text>
	  <view class="remark-input">
	    <textarea placeholder="请输入联系电话" v-model="phone" auto-height/>
	  </view>
	</view>
	
	 <view class="complaint-container">
	    <!-- 标题 -->
	    <view class="complaint-header">
	      <text class="complaint-title">投诉类型</text>
	    </view>
	    
	    <!-- 投诉选项 -->
	    <view class="complaint-section">
	      <checkbox-group @change="handleComplaintChange">
	        <!-- 损害财物 -->
	        <label class="complaint-option">
	          <checkbox value="damage" color="#fdad18"/>
	          <text class="option-title" >损害财物</text>
	        </label>
	        
	        <!-- 恶意欺诈 -->
	        <label class="complaint-option">
	          <checkbox value="fraud" color="#fdad18"/>
	          <text class="option-title" >恶意欺诈</text>
	        </label>
	        <view class="sub-option" v-if="selectedOptions.includes('fraud')">
	          <text class="sub-text">服装不规范(未穿工装、未套鞋套)</text>
	        </view>
	        
	        <!-- 服务恶劣 -->
	        <label class="complaint-option">
	          <checkbox value="language" color="#fdad18"/>
	          <text class="option-title" >服务恶劣</text>
	        </label>
	        <view class="sub-option" v-if="selectedOptions.includes('language')">
	          <text class="sub-text">语气态度恶劣</text>
	        </view>
	        
	        <!-- 其他投诉原因 -->
	        <label class="complaint-option">
	          <checkbox value="other" color="#fdad18"/>
	          <text class="option-title" >其他投诉原因</text>
	        </label>
	      </checkbox-group>
	    </view>
	    
	    <!-- 投诉说明 -->
	    <view class="complaint-notice">
	      <text>客户投诉、一经核实，禁单30天，恶意欺诈、损坏财务未赔偿直接封号处理!(此投诉为本小程序自有投诉渠道，非微信官方投诉渠道)</text>
	    </view>
	    
	    <!-- 提交按钮 -->
	    <view class="submit-btn" @click="handleSubmit">提交</view>
	  </view>
	
</template>

<script >
		export default {
		  data() {
		    return {
		      name: '',
			  phone:'',
			  
			  details:'',
		      selectedOptions: []
		    }
		  },
		  methods: {
		    handleComplaintChange(e) {
		      this.selectedOptions = e.detail.value;
		    },
		    handleSubmit() {
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
				}
				return;
				
		      if(this.selectedOptions.length === 0) {
		        uni.showToast({
		          title: '请至少选择一项投诉类型',
		          icon: 'none'
		        });
		        return;
				
				
		      }
		      
		      uni.showToast({
		        title: '投诉已提交',
		        icon: 'success'
		      });
		      
		      console.log('选择的投诉类型:', this.selectedOptions);
			  
			  this.token = uni.getStorageSync('token');
			   this.$http.post("https://billiards.cqtrust.cn/complaints",{
			  	 worker_name:this.name,
				 worker_phone:this.phone,
				 reason:this.selectedOptions.join(','),
				 details:this.details
				 
			   })
			  .then((res)=>{
			  	console.log(res);
			  	const {code,msg,data} = res;
			  	uni.showToast({
			  		title:msg,
			  		icon:'none'
			  	});
			  	if(code === 1|| code === 200) {
			  		if(data&&data.length>0){
			  			this.cityTrades = data;
			  			console.log(data); 
			  		
			  		}
			  		return Promise.resolve(true);
			  	}
			  	return Promise.reject(false);
			  })
			  .catch((res)=>{
			  	console.log(res);
			  	return Promise.reject(false);
			  });
		    }
		  }
		}
		  
</script>

<style lang="scss" scoped>
		.section {
		  padding: 20rpx 20rpx;
		  border-bottom: 1rpx solid #f0f0f0;
		}
		
		.section:last-child {
		  border-bottom: none;
		}
		
		.section-title {
		  font-size: 32rpx;
		  font-weight: bold;
		  margin-bottom: 20rpx;
		  color: #333;
		  display: block;
		  padding-left: 10rpx;
		  border-left: 6rpx solid #fdad18;
		}
		
		.remark-input {
		  background-color: #f8f8f8;
		  border-radius: 10rpx;
		  padding: 15rpx 20rpx;
		}
		
		.remark-input textarea {
		  width: 80%;
		  min-height: 20rpx;
		  font-size: 28rpx;
		}
		.complaint-container {
		  padding: 30rpx;
		  background-color: #f5f5f5;
		  min-height: 100vh;
		}
		
		.complaint-header {
		  padding: 30rpx 0;
		  
		  .complaint-title {
		    font-size: 36rpx;
		    font-weight: bold;
		    color: #333;
		    border-left: 6rpx solid #fdad18;
		    padding-left: 20rpx;
		  }
		}
		
		.complaint-section {
		  background-color: #fff;
		  border-radius: 12rpx;
		  padding: 25rpx;
		  margin-bottom: 25rpx;
		  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		
		.complaint-option {
		  display: flex;
		  align-items: center;
		  padding: 25rpx 0;
		  border-bottom: 1rpx solid #f0f0f0;
		  
		  &:last-child {
		    border-bottom: none;
		  }
		  
		  .option-title {
		    font-size: 32rpx;
		    font-weight: bold;
		    color: #333;
		    margin-left: 20rpx;
		  }
		}
		
		.sub-option {
		  padding: 20rpx 0 20rpx 70rpx;
		  
		  .sub-text {
		    font-size: 28rpx;
		    color: #666;
		  }
		}
		
		.complaint-notice {
		  background-color: #fff8e6;
		  padding: 20rpx;
		  border-radius: 8rpx;
		  font-size: 26rpx;
		  color: #666;
		  line-height: 1.6;
		  margin-bottom: 30rpx;
		}
		
		.submit-btn {
		  background-color: #fdad18;
		  color: #fff;
		  text-align: center;
		  padding: 25rpx;
		  border-radius: 50rpx;
		  font-size: 32rpx;
		  font-weight: bold;
		  margin-top: 20rpx;
		}
</style>